<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <div>
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <div class="yM-sH-Main" v-if="this.singerDetail.info">
          <div class="yM-lable">
            <div
              class="content"
              :style="{backgroundImage:'url('+ singerDetail.info.imgurl.replace('{size}', 480) +')'}"
            >
              <div class="mask">{{singerDetail.info.singername}}</div>
            </div>
          </div>
          <p class="yM-intro">
            <span>{{singerDetail.info.intro.length >= 120 ? singerDetail.info.intro.substring(0,120) : singerDetail.info.intro}}</span>
            <span
              ref="btn"
              style="display:none"
            >{{singerDetail.info.intro.substring(120,singerDetail.info.intro.length)}}</span>
            <span
              style="font-size:15px;color:#000"
              @touchstart="more"
              ref="more"
              v-if="singerDetail.info.intro.length >= 120"
            >更多</span>
          </p>
          <h4>歌曲列表</h4>
          <ul>
            <router-link
              to="/musicDetail"
              tag="li"
              v-for="(item , index) in singerDetail.songs.list"
              :key="item.audio_id"
            >
              <span class="yM-sort">{{ index+1 < 10 ? '0'+(index + 1) : index+1 }}</span>
              <span
                class="yM-title"
              >{{ item.filename.length >20 ? item.filename.substr(0,19) + '...' : item.filename }}</span>
            </router-link>
          </ul>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
document.addEventListener(
  'touchstart',
  function(event) {
    // 判断默认行为是否可以被禁用
    if (event.cancelable) {
      // 判断默认行为是否已经被禁用
      if (!event.defaultPrevented) {
        event.preventDefault()
      }
    }
  },
  false
)
export default {
  data() {
    return {
      singerDetail: {},
      flag: true,
      isLoading: false
    }
  },
  created: function() {
    this.getSingerDetail()
  },
  methods: {
    onClickLeft: function() {
      this.$router.go(-1)
    },
    getSingerDetail: async function() {
      const singerid = this.$route.query.singerid
      const { data: res } = await this.axios.get('api/singer_info/' + singerid)
      if (res.code === 200) {
        this.singerDetail = res.data
      }
    },
    more: function() {
      if (this.flag) {
        this.$refs.btn.style.display = 'inline'
        this.$refs.more.innerText = '更少'
        this.flag = false
        return
      }
      this.$refs.btn.style.display = 'none'
      this.$refs.more.innerText = '更多'
      this.flag = true
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.getSingerDetail()
      }, 1000)
    }
  }
}
</script>
<style scoped lang="less">
.yM-sH-Main {
  color: #000;
  padding: 0 60px;
  color: #333;
  .yM-lable {
    margin-top: 200px;
    width: 100%;
    text-align: center;
    .content {
      display: inline-block;
      width: 400px;
      height: 400px;
      //   background-image: url('../assets/img/yM-fS-item.jpg');
      background-size: contain;
      border-radius: 40px;
      .mask {
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.7;
        text-align: center;
        line-height: 400px;
        border-radius: 40px;
        color: #fff;
        font-size: 100px;
      }
    }
  }
  .yM-intro {
    color: #ccc;
    font-size: 25px;
  }
  ul {
    li {
      margin-bottom: 40px;
      .yM-sort {
        padding-right: 50px;
      }
    }
  }
}
</style>